<script lang="ts" setup>
import type { ThemeConfig } from '@/stores/interface'
import { useThemeStore } from '@/stores/modules/theme'
import { useAuthButtons } from '@/hooks/useAuthButtons'
import type { FormInstance } from 'element-plus'
import type { SearchItem, ColumnItem } from '@/components/common/ProTable/interface'

const themeStore = useThemeStore()
const { BUTTONS } = useAuthButtons()

const themeConfig = ref<Partial<ThemeConfig>>(themeStore.themeConfig)

const updateTheme = () => {
  themeStore.updateThemeConfig(themeConfig.value)
  themeStore.loadTheme()
}

const formRef = ref<FormInstance>()
const form = reactive({
  input: '',
  select: '',
  dateRange: '',
  checkList: [],
  radio: ''
})
const formRules = reactive({
  input: [{ required: true, message: '不能为空', trigger: 'blur' }],
  select: [{ required: true, message: '不能为空', trigger: 'change' }],
  checkList: [
    {
      type: 'array',
      required: true,
      message: '不能为空',
      trigger: 'change'
    }
  ],
  radio: [
    {
      required: true,
      message: '不能为空',
      trigger: 'change'
    }
  ]
})
const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  }
]
const handleReset = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
}
const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const data = [
  {
    id: 1,
    name: '张三',
    age: 20,
    address: '北京市'
  },
  {
    id: 2,
    name: '李四',
    age: 25,
    address: '上海市'
  },
  {
    id: 3,
    name: '李四四',
    age: 30,
    address: '深圳市'
  },
  {
    id: 4,
    name: '王五五',
    age: 28,
    address: '广州市'
  },
  {
    id: 5,
    name: '王五',
    age: 22,
    address: '成都市'
  }
]
const searchForm: SearchItem[] = [
  {
    key: 'searchKey',
    label: '搜索关键字',
    el: 'input'
  },
  {
    key: 'searchKey2',
    label: '搜索关键字2',
    el: 'input',
    props: {
      placeholder: '请输入搜索关键字2'
    }
  }
]
const columns = reactive<ColumnItem[]>([
  { type: 'selection', fixed: 'left', width: 70, align: 'center' },
  { type: 'sort', label: '排序', width: 80, align: 'center' },
  {
    prop: 'name',
    label: '姓名',
    width: 120,
    align: 'center'
  },
  {
    prop: 'age',
    label: '年龄',
    formatter: (row, column, value) => {
      return `${value}岁`
    },
    align: 'center'
  },
  {
    prop: 'address',
    label: '地址',
    align: 'center'
  },
  {
    type: 'operation',
    label: '操作',
    width: 140,
    operation: [
      {
        label: '查看',
        click: (scope) => {
          ElMessage.success(`查看`)
          console.log('查看', scope)
        }
      },
      {
        label: '编辑',
        show: (scope) => {
          return scope.row.age > 22
        },
        click: (scope) => {
          ElMessage.success(`编辑`)
          console.log('编辑', scope)
        }
      },
      {
        label: '删除',
        show: (scope) => {
          return scope.row.age > 28
        },
        click: (scope) => {
          ElMessage.success(`删除`)
          console.log('删除', scope)
        }
      }
    ],
    align: 'center'
  }
])
</script>

<template>
  <el-form inline :label-width="80" class="p-20">
    <el-form-item label="主色：">
      <el-color-picker v-model="themeConfig.colorPrimary" />
    </el-form-item>
    <el-form-item label="消息色：">
      <el-color-picker v-model="themeConfig.colorInfo" />
    </el-form-item>
    <el-form-item label="成功色：">
      <el-color-picker v-model="themeConfig.colorSuccess" />
    </el-form-item>
    <el-form-item label="警告色：">
      <el-color-picker v-model="themeConfig.colorWarning" />
    </el-form-item>
    <el-form-item label="危险色：">
      <el-color-picker v-model="themeConfig.colorDanger" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="updateTheme">适用配置</el-button>
    </el-form-item>
  </el-form>

  <el-card shadow="always" class="m-20">
    <template #header>按钮</template>
    <el-button size="large">Large</el-button>
    <el-button size="default">Default</el-button>
    <el-button size="small">Small</el-button>
    <el-button type="primary" size="large">Large</el-button>
    <el-button type="primary" size="default">Default</el-button>
    <el-button type="primary" size="small">Small</el-button>
    <el-button plain size="large">Plain</el-button>
    <el-button plain size="default">Plain</el-button>
    <el-button plain size="small">Plain</el-button>
    <p></p>
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-card>

  <el-card shadow="always" class="m-20">
    <template #header>表单元素</template>
    <el-form
      ref="formRef"
      :model="form"
      label-position="right"
      :label-width="80"
      :rules="formRules"
    >
      <el-form-item label="输入框" prop="input">
        <el-input v-model="form.input" placeholder="请输入" disabled />
      </el-form-item>
      <el-form-item label="选择器" prop="select">
        <el-select v-model="form.select" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="日期选择" prop="select">
        <el-date-picker
          v-model="form.dateRange"
          type="daterange"
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
        />
      </el-form-item>
      <el-form-item label="多选框" prop="checkList">
        <el-checkbox-group v-model="form.checkList">
          <el-checkbox label="Option 1" value="Value 1" />
          <el-checkbox label="Option 2" value="Value 2" />
          <el-checkbox label="Option 3" value="Value 3" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="单选框" prop="radio">
        <el-radio-group v-model="form.radio">
          <el-radio :value="3">Option A</el-radio>
          <el-radio :value="6">Option B</el-radio>
          <el-radio :value="9">Option C</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleReset">重置</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-card shadow="always" class="m-20">
    <template #header>表格</template>
    <ProTable ref="tableRef" :data="data" :columns="columns" :searchForm="searchForm">
      <template #tableHeader="scope">
        <el-button type="primary"><i class="iconfont icon-plus"></i>新增数据</el-button>
        <el-button plain><i class="iconfont icon-download"></i>批量导出</el-button>
        <el-button plain><i class="iconfont icon-delete"></i>批量删除</el-button>
        <el-button type="primary" v-if="BUTTONS.add">新增（权限测试）</el-button>
        <el-button type="primary" v-auth="'edit'">修改（权限测试）</el-button>
        <el-button type="primary" v-auth="['delete']">删除（权限测试）</el-button>
      </template>
      <template #name="{ row }">
        <el-tag type="danger">{{ row.name }}</el-tag>
      </template>
      <template #addressHeader="{ row }">
        <el-tag type="danger">自定义表头</el-tag>
      </template>
    </ProTable>
  </el-card>
</template>

<style lang="scss" scoped></style>
